import React,{
  useEffect,useRef
} from 'react'
import * as echarts from 'echarts';

import { option ,option1,option02} from '../../options';

function DataVisualization() {
  let mycart = useRef()
  let mycart01 = useRef()
  let mycart02 = useRef()

  useEffect(() => {
    const myChart = echarts.init(mycart.current)
    myChart.setOption(option)

    const myChart1 = echarts.init(mycart01.current)
    myChart1.setOption(option1)

    const myChart2 = echarts.init(mycart02.current)
    myChart2.setOption(option02) 

    return () => {
      myChart.dispose()
    }

  },[])

  return (
    <div style={{display:'flex'}}>
       <div style={{display: 'flex',flexDirection : 'column'}}>
      
          <div ref={mycart} 
            style={{width: '400px',height:'400px'}}>
          </div>

         
          <div ref={mycart02}
              style={{width: '400px',height:'400px'}}>
        </div>
        
      </div>

      <div ref={mycart01} 
            style={{width: '800px',height:'600px'}}>
          </div>
    
    </div> 
 
  )
}

export default DataVisualization